<template>
  <div>
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="query.name"
          placeholder="商品名称"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <!-- <el-button type="primary" @click="handleIncrease">新增</el-button> -->
        <el-button
          type="danger"
          @click="delAllSelection"
          v-if="pimPermissions.includes('product:commodityimage:delete')"
          >删除</el-button
        >
      </div>
      <el-table
        style="width: 100%;margin-bottom: 10px;"
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sort"
          label="图片权重排序"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="名称"
        ></el-table-column>
        <el-table-column
          prop="memo"
          align="center"
          label="备注"
        ></el-table-column>
        <el-table-column
          :show-overflow-tooltip="true"
          label="缩略图"
          align="center"
        >
          <template slot-scope="scope">
            <el-image
              class="table-td-thumb"
              :src="scope.row.imageUrl"
              :preview-src-list="[scope.row.imageUrl]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="handleEdit(scope.$index, scope.row)"
              v-if="pimPermissions.includes('product:commodityimage:update')"
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="handleStop(scope.$index, scope.row)"
              v-if="scope.row.enableStatus == 0"
              >停用</el-button
            >
            <el-button
              type="text"
              @click="handleRecovery(scope.$index, scope.row)"
              v-if="scope.row.enableStatus == 1"
              >启用</el-button
            >
            <el-button
              type="text"
              class="red"
              @click="handleDelete(index, scope.$index, scope.row)"
              v-if="pimPermissions.includes('product:commodityimage:delete')"
              >删除</el-button
            >
            <el-button
              type="text"
              @click="handleIncrease(scope.$index, scope.row)"
              v-if="pimPermissions.includes('product:commodityimage:save')"
              >新增</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          background
          layout="total,sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 20, 30]"
          @size-change="handleSizeChange"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="50%">
      <el-form ref="editForm" :model="editForm" label-width="auto">
        <el-form-item label="主健">
          <el-input disabled v-model="editForm.id"></el-input>
        </el-form-item>
        <el-form-item label="商品Id">
          <el-input disabled v-model="editForm.commodityId"></el-input>
        </el-form-item>
        <el-form-item label="图片地址" prop="imageUrl">
          <el-input
            style="width: 100%"
            v-model="editForm.imageUrl"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input style="width: 100%" v-model="editForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input style="width: 100%" v-model="editForm.memo"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enableStatus">
          <el-select
            v-model="editForm.enableStatus"
            placeholder="是否启用"
            class="handle-select mr10"
            clearable
          >
            <el-option key="0" label="启用" value="0"></el-option>
            <el-option key="1" label="停止" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 新增弹出框 -->
    <el-dialog title="新增" :visible.sync="addVisible" width="50%">
      <el-form ref="addForm" :rules="rules" :model="addForm" label-width="auto">
        <el-form-item label="商品Id" prop="commodityId">
          <el-input
            style="width: 100%"
            disabled
            v-model="addForm.commodityId"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片地址" prop="imageUrl">
          <el-input style="width: 100%" v-model="addForm.imageUrl"></el-input>
        </el-form-item>
        <el-form-item label="显示顺序" prop="sort">
          <el-input style="width: 100%" v-model="addForm.sort"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="memo">
          <el-input style="width: 100%" v-model="addForm.memo"></el-input>
        </el-form-item>
        <el-form-item label="是否启用" prop="enableStatus">
          <el-select
            v-model="addForm.enableStatus"
            placeholder="是否启用"
            class="handle-select mr10"
            clearable
          >
            <el-option key="0" label="启用" value="0"></el-option>
            <el-option key="1" label="停止" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveIncrease">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import util from "utils/util";
import { mapGetters } from "vuex";
export default {
  name: "productimagemanage",
  data() {
    return {
      pimPermissions: [],
      query: {
        name: "",
        pageIndex: 1,
        pageSize: 20,
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      addVisible: false,
      pageTotal: 0,
      form: {},
      addForm: {
        commodityId: "",
        imageUrl: "",
        sort: "",
        memo: "",
        enableStatus: "",
      },
      editForm: {
        id: "",
        commodityId: "",
        imageUrl: "",
        sort: "",
        memo: "",
        enableStatus: "",
      },
      rules: {
        commodityId: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        imageUrl: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
        sort: [{ required: true, message: "必填不能为空", trigger: "blur" }],
        memo: [{ required: false, message: "必填不能为空", trigger: "blur" }],
        enableStatus: [
          { required: true, message: "必填不能为空", trigger: "blur" },
        ],
      },
      idx: -1,
      ids: [],
    };
  },
  created() {
    this.getData();
    this.pimPermissions = this.permissions;
  },
  watch: {
    "$route.path": function(newVal, oldVal) {
      if (newVal == "/product-image-manage") {
        this.pimPermissions = this.permissions;
      }
    },
    // 刷新浏览器时触发
    permissions: function(newVal, oldVal) {
      // console.log(newVal, oldVal);
      this.pimPermissions = newVal;
    },
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  // watch: {
  //   "$route.path": function(newVal, oldVal) {
  //     if (newVal == "/product-category-manage") {
  //       this.getProductCateManageData();
  //       // console.log(this.permissions);
  //       this.pimPermissions = this.permissions;
  //     }
  //   },

  // },
  methods: {
    // 获取数据
    getData() {
      this.$axios
        .get("/product/commodityimage/page", {
          params: {
            limit: this.query.pageSize,
            page: this.query.pageIndex,
            name: this.query.name,
          },
        })
        .then(({ data: res }) => {
          console.log("商品图片管理", res);
          if (res.code !== 0) {
            return;
          }
          this.pageTotal = res.data.total || 0;

          this.tableData = res.data.list;
        });
    },
    // 停用
    handleStop(index, row) {
      console.log(index, row);
      // 二次确认
      this.$confirm("确定要停用吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          // this.getEdit(index, row, this.saveEdit, "1");
          this.editForm.id = row.id;
          this.editForm.commodityId = row.commodityId;
          this.editForm.imageUrl = row.imageUrl;
          this.editForm.sort = row.sort;
          this.editForm.memo = row.memo;
          this.editForm.enableStatus = "1";
          this.saveEdit();
        })
        .catch(() => {});
    },
    // 启用
    handleRecovery(index, row) {
      console.log(index, row);
      // 二次确认
      this.$confirm("确定要启用吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          // this.getEdit(index, row, this.saveEdit, "0");
          this.editForm.id = row.id;
          this.editForm.commodityId = row.commodityId;
          this.editForm.imageUrl = row.imageUrl;
          this.editForm.sort = row.sort;
          this.editForm.memo = row.memo;
          this.editForm.enableStatus = "0";
          this.saveEdit();
        })
        .catch(() => {});
    },
    // 新增
    handleIncrease(index, row) {
      console.log(index, row);
      this.addVisible = true;
      this.addForm.commodityId = row.commodityId;
    },
    // 保存新增
    saveIncrease() {
      // 得到成功提示
      var addForm = this.addForm;
      // 判空处理
      var bool = util.isEmpty(addForm);
      if (bool) {
        return this.$message.error("必填项不能为空");
      }
      this.$axios
        .post("/product/commodityimage", addForm, {
          headers: {
            "Content-type": "application/json",
          },
        })
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return;
          }
          this.addVisible = false;
          this.$message.success("操作成功");
          this.addForm = {};
          this.getData();
        })
        .catch(() => {});
    },

    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(i, index, row) {
      // console.log(i, index, row);
      // // 二次确认删除
      // this.$confirm("确定要删除吗？", "提示", {
      //   type: "warning"
      // })
      //   .then(() => {
      //     this.$message.success("删除成功");
      //     this.tableData[i].splice(index, 1);
      //   })
      //   .catch(() => {});
      this.ids[0] = row.id;
      util.delete.call(
        this,
        "/product/commodityimage",
        index,
        this.ids,
        this.getData
      );
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      var ids = this.multipleSelection.map((item) => {
        return item.id;
      });
      util.delete.call(this, "/product/commodityimage", "", ids, this.getData);
    },

    // 编辑操作
    handleEdit(index, row) {
      this.editVisible = true;
      this.getEdit(index, row);
    },
    getEdit(index, row, callback, num) {
      console.log(index, row);

      this.$axios
        .get(`/product/commodityimage/${row.id}`)
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return;
          }
          var {
            id,
            commodityId,
            imageUrl,
            sort,
            memo,
            enableStatus,
          } = res.data;
          this.editForm = {
            id,
            commodityId,
            imageUrl,
            sort,
            memo,
            enableStatus,
          };
          this.editForm.enableStatus = this.editForm.enableStatus.toString();
          // callback && callback(num);
        })
        .catch(() => {});
    },
    // 保存编辑
    saveEdit() {
      var { id, commodityId, imageUrl, sort, enableStatus } = this.editForm;
      // 判空处理
      var bool = util.isEmpty({
        id,
        commodityId,
        imageUrl,
        sort,
        enableStatus,
      });
      if (bool) {
        return this.$message.error("必填项不能为空");
      }
      this.$axios
        .put("/product/commodityimage", {
          id: this.editForm.id,
          commodityId: this.editForm.commodityId,
          imageUrl: this.editForm.imageUrl,
          sort: this.editForm.sort,
          memo: this.editForm.memo,
          enableStatus: this.editForm.enableStatus,
        })
        .then(({ data: res }) => {
          console.log(res);
          if (res.code !== 0) {
            return;
          }
          this.$message.success("操作成功");
          this.editVisible = false;
          this.getData();
        })
        .catch(() => {});
      // this.editVisible = false;
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
    handleSizeChange(val) {
      this.$set(this.query, "pageSize", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
  width: 120px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
/* .table-header{
  background: #fff !important;
} */
</style>
